<script setup lang="ts">
import { audioStoriesStore } from "@/store";
import { storeToRefs } from "pinia";
import { ref, watch } from "vue";
import AudioIcon from "@/components/icon/AudioIcon.vue";

const audioStore = audioStoriesStore();
const { isPlay, audioSrc, dragProgress, currentTime } = storeToRefs(audioStore);
const { updateCurrentTimeStore, updateIsPlayOrPauseStore, updateDragProgressStore,updateDurationTimeStore } = audioStore;

let audioHtml = ref();
let audioUrl = ref('');

audioUrl.value = audioSrc.value;

// 音频路径发生改变重新加载
watch(() => audioSrc.value, (newValue) => {
  audioUrl.value = newValue;
  updateIsPlayOrPauseStore(true);
  audioHtml.value.load();

  if (isPlay) {
    setTimeout(() => {
      audioHtml.value.play();
    }, 100)
  }
  else {
    setTimeout(() => {
      audioHtml.value.pause();
    }, 100)
  }
})

// 暂停或开始
watch(() => isPlay.value, () => {
  if (isPlay.value) {
    setTimeout(() => {
      audioHtml.value.play();
    }, 100)
  }
  else {
    setTimeout(() => {
      audioHtml.value.pause();
    }, 100)
  }
})

// 设置进度条
function audioTimeupdate(e:any) {
  if (dragProgress.value) {
    e.target.currentTime = currentTime.value;
    updateDragProgressStore(false);
  }
  else {
    updateCurrentTimeStore(parseInt(e.target.currentTime))
  }
  updateDurationTimeStore(e.target.duration);
}

</script>

<template>
  <!-- tabbar -->
  <nav class="z-5" route v-if="!$route.meta.showTabbar">
    <router-link class="tabar icon-home" to="/home"></router-link>
    <router-link class="tabar icon-discover" to="/discover"></router-link>
    <router-link class="tabar icon-serialize" to="/serialize"></router-link>
    <router-link class="tabar icon-user" to="/user"></router-link>
  </nav>

  <!-- 全局音频 -->
  <audio v-show="audioSrc" class=" absolute top-96" :src="audioUrl" ref="audioHtml"
    @timeupdate="audioTimeupdate"></audio>

  <!-- 右上角icon -->
  <AudioIcon />

  <!-- 路由跳转过渡 -->
  <RouterView v-slot="{ Component, route }">
    <transition :name="route.meta.transitionName">
      <keep-alive>
        <component :is="Component" />
      </keep-alive>
    </transition>
  </RouterView>

</template>

<style lang="scss" scpoed>
nav {
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 55px;
  background-color: #fff;
  z-index: 5;

  .tabar {
    flex: 1;
    background-size: 40px 40px;
    background-repeat: no-repeat;
    background-position: center center;

    &.icon-home {
      background-image: url("./assets/tabar/icon_home.png");
    }

    &.icon-discover {
      background-image: url("./assets/tabar/icon_dicover.png");
    }

    &.icon-serialize {
      background-image: url("./assets/tabar/icon_serial.png");
    }

    &.icon-user {
      background-image: url("./assets/tabar/icon_me.png");
    }

    &.router-link-active {
      &.icon-home {
        background-image: url(./assets/tabar/icon_home_selected.png);
      }

      &.icon-discover {
        background-image: url(./assets/tabar/icon_discover_selected.png);
      }

      &.icon-serialize {
        background-image: url(./assets/tabar/icon_serial_selected.png);
      }

      &.icon-user {
        background-image: url(./assets/tabar/icon_me_selected.png);
      }
    }
  }
}

.slide-right-enter-from,
.slide-right-leave-to {
  transform: translateX(100%);
}

.slide-right-enter-active,
.slide-right-leave-active {
  transition: all .5s;
}

.slide-right-enter-to,
.slide-right-leave-from {
  transform: translateX(0);
}

.slide-right-enter-from.home,
.slide-right-leave-to.home {
  transform: translateX(-35%);
}

.slide-right-leave-active.home {
  transition: all .1s;
}

.slide-right-enter-active.home {
  transition: all .5s;
}

.slide-right-enter-to.home,
.slide-right-leave-from.home {
  transform: translateX(0);
}
</style>
